<template>
    <div class="app-container">
        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button type="primary" @click="handleAdd">新增</el-button>
            </el-col>
        </el-row>
        <el-table v-loading="loading" :data="dataList" stripe>
            <el-table-column label="序号" align="center" type="index" width="55" />
            <el-table-column label="报告模板编号" align="center" prop="number" />
            <el-table-column label="报告模板名称" align="center" prop="name" />
            <el-table-column label="创建单位" align="center" prop="unit" />
            <el-table-column label="创建人" align="center" prop="createUser" />
            <el-table-column label="操作" align="center" width="150" class-name="small-padding fixed-width">
                <template #default="scope">
                    <el-button type="text" @click="handleDownload(scope.row)">下载</el-button>
                    <el-button type="text" @click="handleUpdate(scope.row)">上传</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-dialog :title="'报告模版管理'" v-model="open" width="800px" append-to-body>
            <p class="mt15"></p>
            <el-form ref="addModelRef" label-width="100px" :model="form" :rules="rules">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="模板编号" prop="number" required>
                            <el-input v-model="form.number" placeholder="请输入模板编号" disabled />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="模板名称" prop="name">
                            <el-input v-model="form.name" placeholder="请输入模板名称" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col>
                        <el-form-item label="模板文件" prop="fileId">
                            <file-upload ref="uploadRef" v-model="form.attach" :fileType="['doc', 'docx']" :limit="1"
                                @uploadFile="uploadFile" @delFile="delFile" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="创建人" prop="createUser" required>
                            <el-input v-model="form.createUser" placeholder="请输入创建人" disabled />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="创建时间" prop="createTime" required>
                            <el-input v-model="form.createTime" placeholder="请输入创建时间" disabled />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="save">保 存</el-button>
                    <el-button @click="open = false">取 消</el-button>
                </div>
            </template>
        </el-dialog>
        <el-dialog :title="'报告模版管理'" v-model="open1" width="600px" append-to-body>
            <p class="mt15"></p>
            <el-form ref="addModelRef1" label-width="100px" :model="form1" :rules="rules">
                <el-row>
                    <el-col>
                        <el-form-item label="模板文件" prop="fileId">
                            <file-upload  v-model="form1.attach" :fileType="['doc', 'docx']" :limit="1"
                                @uploadFile="uploadFile" @delFile="delFile" />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="save1">保 存</el-button>
                    <el-button @click="open1 = false">取 消</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup name="reportModelManage">
import useUserStore from '@/store/modules/user'
import { getModelList, getModelInfo, saveModel, uploadModel } from "@/api/earthEvaluaDisasterReport/reportModelManage"
import { onMounted } from 'vue';
const { proxy } = getCurrentInstance();
const dataList = ref([]);
const loading = ref(false);
const open = ref(false);
const open1 = ref(false);
const form = ref({});
const form1 = ref({});
const { name } = useUserStore();
const rules = ref({
    name: [{ required: true, message: "模版名称不能为空", trigger: "blur" }],
    fileId: [{ required: true, message: "模版文件不能为空", trigger: "change" }],
});
const isAdd = ref(true);
// 新增
const handleAdd = () => {
    getModelInfo().then(res => {
        open.value = true;
        proxy.resetForm("addModelRef");
        form.value = {
            number: res.data,
            createUser: name,
            createTime: getNowFormatTime(),
            fileId: '',
            attach: [],
        };
    })
}
// 下载
const handleDownload = (row) => {
    var query = {
        attachId: row.fileId,
    }
    location.href = import.meta.env.VITE_APP_BASE_API + "/attachment/downLoadFile?attachId=" + encodeURIComponent(query.attachId);
}
// 上传
const handleUpdate = (row) => {
    open1.value = true;
    proxy.resetForm("addModelRef1");
    form1.value = {
        id: row.id,
        fileId: '',
        attach: [],
    };
}

const uploadFile = (val) => {
    if(open.value){
        form.value.fileId = val;
    }
    if(open1.value){
        form1.value.fileId = val;
    }
    console.log(val,'===');
    proxy.$refs['addModelRef'].validateField('fileId')
}
const delFile = () => {
    form.value.fileId = '';
    form.value.attach = [];
    form1.value.fileId = '';
    form1.value.attach = [];
    proxy.$refs['addModelRef'].validateField('fileId')
}
const save = () => {
    proxy.$refs["addModelRef"].validate(valid => {
        if (valid) {
            saveModel({ ...form.value }).then(res => {
                proxy.$modal.msgSuccess("新增成功");
                open.value = false;
                getList();
            })
        }
    })
}
const save1 = () => {
    proxy.$refs["addModelRef1"].validate(valid => {
        if (valid) {
            proxy.$modal.confirm('是否确认覆盖该报告模版？').then(function () {
                return uploadModel({ ...form1.value });
            }).then(() => {
                open1.value = false;
                getList();
                proxy.$modal.msgSuccess("保存成功");
            }).catch(() => { });
        }
    })
}
const getList = () => {
    loading.value = true;
    getModelList().then(res => {
        dataList.value = res.data ? res.data : [];
        loading.value = false;
    }).catch(err => { loading.value = false });
}
onMounted(() => {
    getList();
})
//获取当前日期，格式YYYY-MM-DD
function getNowFormatDay(nowDate) {
    var char = "-";
    if (nowDate == null) {
        nowDate = new Date();
    }
    var day = nowDate.getDate();
    var month = nowDate.getMonth() + 1;//注意月份需要+1
    var year = nowDate.getFullYear();
    //补全0，并拼接
    return year + char + completeDate(month) + char + completeDate(day);
}
//获取当前时间，格式YYYY-MM-DD HH:mm:ss
function getNowFormatTime() {
    var nowDate = new Date();
    var colon = ":";
    var h = nowDate.getHours();
    var m = nowDate.getMinutes();
    var s = nowDate.getSeconds();
    //补全0，并拼接
    return getNowFormatDay(nowDate) + " " + completeDate(h) + colon + completeDate(m) + colon + completeDate(s);
}
//补全0
function completeDate(value) {
    return value < 10 ? "0" + value : value;
}
</script>

<style lang="scss" scoped></style>